<template>
    <div id="app">
        <div id="nav">
            <router-link to="/" tag="li">Home</router-link>
            |
            <router-link to="/about" tag="li">About</router-link>
            |
            <router-link to="/hello" tag="li">Hello</router-link>
            |
            <router-link to="/case" tag="li">Case</router-link>
        </div>
        <router-view/>
    </div>
</template>
<style lang="scss">
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }

    $color: #42b983; /* 声明一个变量 */
    #nav {
        padding: 30px;

        li {
            font-weight: bold;
            color: #2c3e50;
            display: inline-block;
            cursor: pointer;
            /*list-style: disc;*/
            /*(scss)& 父级选择器*/
            &.router-link-exact-active {
                color: $color;
                /*    直接变量名来*/
            }
        }
    }
</style>
